<template>
  <view
    class="raffle-wheel"
    :style="{
      width: canvasWidth + 44 + 'px',
      height: canvasHeight + 44 + 'px',
    }"
  >
    <view
      class="raffle-wheel-box"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    >
      <view
        class="raffle-wheel-show"
        :style="
          'transform: rotate(' +
          rotates +
          'deg);transition-duration: ' +
          duration +
          's;'
        "
      >
        <view
          class="item-block"
          v-for="(item, index) in prizeList"
          :key="index"
        >
          <view
            class="item-view-block"
            :style="
              'transform: rotate(' +
              degs * index +
              'deg) skewY(' +
              skew +
              'deg);background: ' +
              color[index % 8] +
              ';'
            "
          >
          </view>
          <view
            class="item-view"
            :style="
              'transform: translateX(-50%) rotate(' +
              (degs * index + degs / 2) +
              'deg);width: ' +
              textWidth +
              ';'
            "
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
      <view class="raffle-wheel__action" @click="handleAction"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    canvasWidth: {
      type: Number,
      default: 240,
    },
    canvasHeight: {
      type: Number,
      default: 240,
    },
    // 奖品列表
    prizeList: {
      type: Array,
      // 必须是偶数 且大于等于4
      validator: function (value) {
        return value.length % 2 === 0;
      },
      required: true,
    },
    // 旋转动画时间 单位s
    duration: {
      type: Number,
      default: 8,
    },
    // 旋转的圈数
    ringCount: {
      type: Number,
      default: 8,
    },
    // 奖品名称所对应的 key 值
    strKey: {
      type: String,
      default: String,
    },
    // 中奖单位
    targetIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      flag:true,
      thedata:'',
      num: "",
      isClick: true, // 当前是否可点击
      isShow: true, // 是否初始化
      skew: 0, // 偏移角度
      degs: 0, // 旋转角度
      color: [
        "rgb(235, 102, 105)",
        "rgb(246, 153, 86)",
        "rgb(254, 204, 117)",
        "rgb(137, 206, 90)",
        "rgb(125, 215, 206)",
        "rgb(122, 167, 246)",
        "rgb(165, 110, 230)",
        "#CCCCCC",
      ],
      textWidth: "50%",
      rotates: 0, // box旋转角度
      isRoteIndex: 0, // 已经选中的key
    };
  },
  mounted() {
    this.setView();
    this.hiddenThisPage();
  },
  // onHide(){this.hiddenThisPage()},
  methods: {
    // 计算当前每个deg
    // setView() {
    //   let length = this.prizeList.length;
    //   console.log(this.prizeList.length);
    //   this.textWidth = 180 / length + "%";
    //   let _degs = 360 / length; // 每个距离上一个的偏移角度
    //   if (length < 4) {
    //   } else {
    //     // 奖项大于等于4个
    //     this.degs = _degs;
    //     this.skew = _degs - 90;
    //   }
    // },
    //    计算当前每个deg
    setView(num,thedata) {
      // console.log(thedata); 
      // console.log(this.thedata);
      // // for (demo in thedata){
      //   thedata==this.thedata?this.flag===true:this.flag===false
      //   console.log(this.flag);
      // // }
      // this.thedata=thedata;
      this.num = num;
      let length = this.prizeList.length;
      if (num) {
        length = num;
      }
      this.textWidth = 180 / length + "%";
      let _degs = 360 / length; // 每个距离上一个的偏移角度
      if (length < 4) {
      } else {
        // 奖项大于等于4个
        this.degs = _degs;
        this.skew = _degs - 90;
      }
    },
    hiddenThisPage() {
      window.onunload = function () {
        console.log("离开");
      };
    },
    // 点击抽奖
    handleAction() {
      if (!this.isClick) {
        return false;
      }
      this.isClick = false;
      this.$emit("befoterClick", {
        type: "start",
        callback: this.rotoreAction,
      });
    },
    rotoreAction(index) {
      let _rotates = 0;
      if (this.isShow) {
        let _len = this.num ? this.num - 1 : this.prizeList.length - 1;
        // 第一次角度 => (总项 - 当前项) * 角度 + 360 * 圈数
        _rotates = (_len - index) * this.degs + 360 * this.ringCount;

        //  this.flag?this.isShow===false: this.isShow===true;
        this.isShow==false;
        this.rotates += _rotates + this.degs / 2;
      } else {
        // 不是第一次 =>
        let _len = this.num ? this.num - 1 : this.prizeList.length - 1;
        _rotates = (_len - index) * this.degs + 360 * this.ringCount;

        this.isShow = false;
        this.rotates += _rotates + this.degs / 2;
        _rotates =
          -(index - this.isRoteIndex) * this.degs + 360 * this.ringCount;
        this.rotates += _rotates;
      }
      this.isRoteIndex = index;
      this.setTimeOut();
    },
    setTimeOut() {
      setTimeout(() => {
        console.log("转动结束");
        this.$emit("afterClick", {
          type: "end",
          callback: this.endAction,
        });
        this.isClick = true;
      }, this.duration * 1000 + 100);
    },
    endAction() {
      console.log("本次选中的：" + this.prizeList[this.targetIndex].name);
      return this.prizeList[this.targetIndex].name;
    },
  },
};
</script>

<style lang="scss">
$actionBgUrl: "~static/raffle-wheel/raffle-wheel__action";
$raffleBgUrl: "~static/raffle-wheel/raffle-wheel__bg";
.raffle-wheel {
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url($raffleBgUrl + ".png");
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    background-image: url($raffleBgUrl + "@2x.png");
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($raffleBgUrl + "@3x.png");
  }
}
.raffle-wheel-box {
  border-radius: 50%;
  overflow: hidden;
  background-color: #f2f2f2;
  box-shadow: 1px 1px 1px 1px #ffe9aa;
  position: relative;
  border: none;
}
.raffle-wheel-show {
  width: 100%;
  height: 100%;
  position: relative;
  border: none;
}
.item-block {
  width: 100%;
  height: 100%;
  position: absolute;
}
.item-view-block {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}
.item-view {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 50%;
  width: 25%;
  height: 50%;
  transform-origin: center 100%;
  font-size: 26upx;
  text-align: center;
  padding-top: 20upx;
  text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
    line-height: 30upx;
  }
  image {
    display: block;
    width: 50upx;
    height: 50upx;
    margin: 10upx auto 0;
  }
}
.raffle-wheel__action {
  position: absolute;
  top: calc(50% - 58px);
  left: calc(50% - 58px);
  width: 114px;
  height: 114px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url($actionBgUrl + ".png");
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    background-image: url($actionBgUrl + "@2x.png");
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($actionBgUrl + "@3x.png");
  }
}
</style>
